<template>
  <VolBox
    :lazy="true"
    :model.sync="model"
    title="产品列表"
    :height="400"
    :width="800"
    :padding="15"
  >
    <!-- table数据 -->
    <!-- :max-height="450" -->
    <vol-table
      ref="cptable"
      :loadKey="true"
      :columns="columns"
      :height="300"
      :index="true"
      :ck="true"
      :tableData="tableData"
      :paginationHide="true"
      :columnIndex="false"
      @rowClick="rowClick"
    ></vol-table>
    <div slot="footer">
      <Button type="success" @click="getFirstRow">保存</Button>
      <Button type="info" @click="close">关闭</Button>
    </div>
  </VolBox>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      type: "",
      goodName: "",
      //   表格
      //   isSingle: true,
      tableData: [],
      columns: [
        // {
        //   width: 30,
        //   align: "left",
        //   render: (h, { row, column, index }) => {
        //     return h("el-checkbox", {
        //       props: {
        //         value: row.check,
        //         label: "",
        //       },
        //       on: {
        //         input: (value) => {
        //           row.check = value;
        //         },
        //         change: (value) => {
        //           this.handleClick(value);
        //         },
        //       },
        //     });
        //   },
        // },
        {
          field: "productId",
          title: "产品id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true,
          sortable: true,
        },
        {
          field: "productName",
          title: "产品名称",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "productCode",
          title: "产品编码",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "costPrice",
          title: "成本价",
          type: "decimal",
          width: 80,
          align: "left",
        },
        // {
        //   field: "sort",
        //   title: "排序",
        //   type: "decimal",
        //   width: 80,
        //   align: "left",
        //   edit:{
        //     keep:true,
        //     type:"number",
        //     min:0
        //   }
        // },
      ],
      //   弹框
      model: false,
    };
  },
  components: {
    VolBox: () => import("@/components/basic/VolBox.vue"),
    VolTable: () => import("@/components/basic/VolTable.vue"),
  },
  created() {},
  methods: {
    // // 监听多选框
    // handleClick(value) {
    //   console.log(1, value);
    // },
    // 打开弹框
    open(code) {
      this.searchClick(code);
    },
    rowClick ({ row, column, event }) {
      this.$refs.cptable.$refs.table.toggleRowSelection(row);
      return true;
      // console.log("点击行")
    //  this.$refs.table.$refs.table.toggleRowSelection(row);
      // row.check=!row.check
      // if(row.check){
      //   this.list.push(row.productId);
      // }else{
      //   var index = this.list.indexOf(row.productId);
      //   if(index > -1){this.list.splice(index,1);}
      // }
      // console.log('this.list',this.list)

    },
    //查询按钮
    searchClick(mValue) {
      console.log("mValue", mValue);
      let id = sessionStorage.getItem("distributorId");
      if (id) {
        // this.list = [];
        let params = {
          page: 1, //分页页数(可不填)
          rows: 30, //分页大小(可不填)
          sort: "", //可不填
          order: "", //可不填
          value: '', //选中的数据
          wheres: [{ name: "distributionCode", value: id }], // 查询条件(可不填)
        };
        // params.value = params.value.join(",");
        if (mValue.length != 0) {
          params.value = mValue.join(",");
        }
        params.wheres = JSON.stringify(params.wheres);
        this.http.post("/api/Stores/GetGoodsTaoPiao", params).then((res) => {
          // console.log("接口数据", res);
          this.model = true;
          this.tableData = res.data;
          this.$nextTick(() => {
             res.data.forEach(element => {
              if(element.check){
                  // this.list.push(element.productId);
                  this.$refs.cptable.$refs.table.toggleRowSelection(element);
                }
              });
          })
         
          // res.data
          
        });
      } else {
        this.$message.error("请选择分销商！");
      }
    },
    // 保存按钮
    getFirstRow() {
      // let list = [];
      this.list = this.$refs.cptable.$refs.table.selection.map(i => {
        return i.productId
      })
      this.tableData.forEach((item) => {
        if (this.list.includes(item.productId)) {
          item.check = true
        }
      });
      
      console.log("保存",this.list);

      
      this.$emit("submit",this.list);
      this.model = false;
    },
    // 关闭按钮
    close() {
      this.model = false;
    },
  },
};
</script>
<style lang="less" scoped>
.el-cascader {
  line-height: 32px !important;
}
.el-input__inner {
  height: 32px !important;
}
</style>